<template>
  <div class="message-private-pc">
    <aside class="aside">
      <mu-tabs class="aside-header" :value.sync="tabActive">
        <mu-tab>消息列表</mu-tab>
        <mu-tab>联系人</mu-tab>
      </mu-tabs>
      <div class="aside-main">
        <chat-list v-if="tabActive === 0" ref="chatList" @chat="toChat" />
        <contact-list v-else-if="tabActive === 1" @chat="toChat" />
      </div>
    </aside>
    <div class="main">
      <message-private-chat :id="id" :appbar="false" :show-load-link="true" @refresh="refresh" />
    </div>
  </div>
</template>

<script>
import MessagePrivateChatList from './MessagePrivateChatList'
import MessagePrivateContactList from './MessagePrivateContactList'
import MessagePrivateChat from '../message-private-chat'

export default {
  name: 'MessagePrivatePc',
  components: {
    ChatList: MessagePrivateChatList,
    ContactList: MessagePrivateContactList,
    MessagePrivateChat
  },
  data() {
    return {
      tabActive: 0,
      id: 0
    }
  },
  methods: {
    toChat(userId) {
      this.id = userId
    },
    refresh() {
      if (this.$refs.chatList) {
        this.$refs.chatList.refresh()
      }
    }
  }
}
</script>

<style scoped>
.message-private-pc {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
}
.aside {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  width: 360px;
  flex: 0 0 360px;
}
.aside-main {
  display: flex;
  flex-flow: column;
  flex: 1;
}
.main {
  flex: 1;
}
</style>
